<template>
  <div id="picture-add-batch" >
    <h1 class="page-title" style="text-align: center; font-weight: bold">批量抓取图片</h1>
    <div class="form-section">
      <a-form
        layout="vertical"
        :model="formData"
        @finish="handlePictureBatchSubmit"
        class="info-form"
      >
        <a-form-item label="抓取信息" name="searchText" class="form-item">
          <a-input
            v-model:value="formData.searchText"
            placeholder="请输入要抓取的图片内容"
            class="form-input"
          />
        </a-form-item>
        <a-form-item label="抓取数量" name="count" class="form-item">
          <a-input-number
            style="width: 240px"
            v-model:value="formData.count"
            placeholder="请选择要抓取的数量"
            size="large"
            :min="1"
            :max="30"
            allowClear
            class="form-textarea"
          />
        </a-form-item>
        <a-form-item label="图片名称前缀" name="namePrefix" class="form-item">
          <a-input
            v-model:value="formData.namePrefix"
            placeholder="请输入图片名称的前缀（会自动补充图片序号）"
            class="form-input"
          />
        </a-form-item>
        <a-form-item label="分类" name="category" class="form-item">
          <a-auto-complete
            v-model:value="formData.category"
            placeholder="为抓取的图片选择分类"
            allowClear
            :options="categoryOptions"
            class="form-input"
          />
        </a-form-item>
        <a-form-item label="标签" name="tags" class="form-item">
          <a-select
            v-model:value="formData.tags"
            mode="tags"
            placeholder="为抓取的图片添加标签（按回车添加）"
            allowClear
            :options="tagOptions"
            class="form-select"
          />
        </a-form-item>

        <a-form-item class="form-item submit-item">
          <a-button type="primary" html-type="submit" class="submit-btn" :loading>
            执行抓取
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
  editPictureUsingPost,
  listPictureTagCategoryUsingGet, uploadPictureByBatchUsingPost
} from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 表单数据初始化
const formData = reactive<API.PictureUploadByBatchDTO>({})
const loading = ref(false)

// 创建图片时表单提交
const handlePictureBatchSubmit = async (values: any) => {

  loading.value = true

  const res = await uploadPictureByBatchUsingPost({
    ...formData
  })
  if (res.data?.code === 0 && res.data?.data) {
    message.success(`抓取成功，共 ${res.data.data} 条`)
    // 跳转到主页
    await router.push('/')
  } else {
    message.error('抓取失败: ' + res.data?.message)
  }

  loading.value = false
}

// 分类标签和图片标签
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

// 获取分类标签和图片标签
const getPictureTagCategory = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data?.code === 0 && res.data?.data) {
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((category) => ({
      value: category,
      label: category
    }))
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((tag) => ({
      value: tag,
      label: tag
    }))
  } else {
    message.error('加载标签失败: ' + res.data?.message)
  }
}

// 初始化, 页面挂载时
onMounted(() => {
  // 加载标签
  getPictureTagCategory()
})
</script>

<style scoped>
/* 基础容器 */
#picture-add-batch {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 标题通用样式 */
.page-title {
  margin: 0 0 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.form-section {
  width: 100%;
  background-color: #e1eedf;
  border-radius: 8px;
  padding: 25px;
}

/* 表单项 */
.form-item {
  margin-bottom: 20px !important;
}

/* 输入框 */
.form-input,
.form-textarea,
.form-select {
  border-radius: 6px !important;
  border-color: #e5e7eb !important;
  transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1) !important;
}

/* 按钮 */
.submit-item {
  display: flex;
  justify-content: center;
}

.submit-btn {
  margin-top: 32px;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: bold;
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  width: 280px;
}

</style>
